<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html" >
        <h:head>
            <f:facet name="first">
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Social Full Fun</title>
                <link rel="shortcut icon" type="image/x-icon" href="http://#{initParam['DIRECCION_SERVIDOR']}/Iconos/icono.ico"/>
            </f:facet>
            <script type="text/javascript">$(document).ready(function(){iniciarDatos();});</script>
            <link href="http://#{initParam['DIRECCION_SERVIDOR']}/estilos/estilo-comunLogin/theme.css" rel="stylesheet" type="text/css"/>
        </h:head>

        <h:body>
            <p:layout  fullPage="true">
                <p:layoutUnit  position="center">
                    <h:form id="formularioReservaEvnetoD" 
                            binding="#{reservaEventoControlador.formularioReservaEvento}">
                        <p:remoteCommand name="iniciarDatos" update="formularioReservaEvnetoD" process="@this"/>
                        <br/>
                        <p:growl id="growReservaEvento" showDetail="true" sticky="true" />
                        <center><h:outputText style="color: #CCCCCC"
                                              value="#{reservaEventoDataManager.titulo}"/>
                        </center>
                        <br/>
                        <p:panelGrid id="panelReservaEventoID" columns="2" >
                            <h:outputLabel value="Número de persona:"/>
                            <h:inputText id="capacidadID" value="#{reservaEventoDataManager.eventoUsuario.evUsNumeroPersona}"
                                         required="true"
                                         requiredMessage="El número de personas es requerida"
                                         validatorMessage="El número de personas debe ser un dato numérico"
                                         converterMessage="El número de personas debe ser un dato numérico"
                                         disabled="#{!reservaEventoDataManager.reservar}">
                            </h:inputText>
                            <h:outputLabel value="Fecha de la reserva:"/>
                            <p:calendar value="#{reservaEventoDataManager.eventoUsuario.evUsFechaReserva}" 
                                        pattern="d/M/yyyy HH:mm" showOn="button"
                                        required="true" navigator="true"
                                        requiredMessage="La fecha de reserva es requerida"
                                        disabled="#{!reservaEventoDataManager.reservar}"/>
                            <p:commandButton value="Reservar" action="#{reservaEventoControlador.reservarEvento()}" 
                                             process="panelReservaEventoID" update="formularioReservaEvnetoD"
                                             rendered="#{reservaEventoDataManager.reservar}"/>
                            <p:commandButton value="Cancelar Reserva" action="#{reservaEventoControlador.cancelarReservarEvento()}" 
                                             process="panelReservaEventoID" update="formularioReservaEvnetoD"
                                             rendered="#{!reservaEventoDataManager.reservar}"/>
                             <p:commandButton value="Salir" onclick="top.close()"/>
                        </p:panelGrid>

                    </h:form> 
                </p:layoutUnit>
            </p:layout>
        </h:body>
    </f:view>
</html>

